<template>
  <div class="gray-page record-page inspect-record-page">
    <nav-bar title="重点单位巡查记录"></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <van-search
        readonly
        background="#f6f6f6"
        v-model="searchOptionStr"
        placeholder="多条件搜索"
        :left-icon="searchLeftIcon"
        clearable
        @click="filterPopupShow = true"
      />
      <template v-if="moreList.length">
        <div class="table-list">
          <div class="table-list-head">
            <van-row>
              <van-col :span="11">重点单位名称</van-col>
              <van-col :span="9">上次巡查时间</van-col>
              <van-col :span="4" align="center">操作</van-col>
            </van-row>
          </div>
          <div
            class="table-list-row"
            :class="key % 2 ? 'table-list-row__even' : 'table-list-row__odd'"
            v-for="(item, key) in moreList"
            :key="key"
          >
            <van-row type="flex">
              <van-col :span="11">
                <p class="van-ellipsis">{{ item.companyName }}</p>
              </van-col>
              <van-col :span="9">
                <span
                  class="table-list-row__status"
                  :class="{
                    'table-list-row__status_abnormal':
                      (item.latentDangerResult && item.latentDangerResult === '0') ||
                      (!item.latentDangerResult && item.inspectionResult === '1'),
                    'table-list-row__status_normal':
                      (item.latentDangerResult && item.latentDangerResult === '1') ||
                      (!item.latentDangerResult && item.inspectionResult === '0')
                  }"
                >
                  {{ item.inspectionTime.split(' ')[0] }}
                  <van-icon
                    name="warning"
                    v-if="
                      (item.latentDangerResult && item.latentDangerResult === '0') ||
                      (!item.latentDangerResult && item.inspectionResult === '1')
                    "
                  />
                </span>
              </van-col>
              <van-col :span="4">
                <van-button
                  type="info"
                  plain
                  size="mini"
                  @click="
                    $router.push({
                      path: `/inspectvisit/inspect/company/detail`,
                      query: {
                        type: 'recordDetail',
                        gridCode: searchForm.gridCode,
                        code: item.code,
                        date: item.inspectionTime.split(' ')[0]
                      }
                    })
                  "
                >
                  查看
                </van-button>
              </van-col>
            </van-row>
          </div>
        </div>
      </template>
      <template v-if="!moreList.length">
        <van-empty
          :image="require('@/assets/images/basic/pic_no_content.png')"
          description="暂无内容~"
          style="height: 300px"
        />
      </template>
    </div>
    <van-popup
      v-model="filterPopupShow"
      round
      position="right"
      style="height: 100%; width: 80%"
      class="inspect-record-popup"
    >
      <van-cell
        size="large"
        title="搜索条件"
        value="清空"
        value-class="van-cell__value_blue"
        is-link
        border
        :clickable="false"
      >
        <template #right-icon>
          <div class="van-cell__right-icon" @click="onClear">
            <img
              src="@/assets/images/inspectVisit/inspect/icon_popup_clear@2x.png"
              width="16px"
              height="16px"
              style="vertical-align: middle"
              alt=""
            />
          </div>
        </template>
      </van-cell>
      <van-cell title="网格名称" :border="false" />
      <div class="inspect-record-tag--group">
        <van-row>
          <van-col :span="12" v-for="(item, key) in gridData" :key="key">
            <div
              class="inspect-record-tag"
              :class="{ active: searchForm.gridCode === item.gridCode }"
              @click="handleGridChange(item)"
            >
              {{ item.gridName }}
            </div>
          </van-col>
        </van-row>
      </div>
      <template v-if="pointData.length">
        <van-cell title="单位名称" :border="false" />
        <div class="inspect-record-tag--group">
          <van-row>
            <van-col :span="12" v-for="(item, key) in pointData" :key="key">
              <div
                class="inspect-record-tag"
                :class="{ active: searchForm.companyCode === item.companyCode }"
                @click="handleCompanyChange(item)"
              >
                {{ item.companyName }}
              </div>
            </van-col>
          </van-row>
        </div>
      </template>
      <van-cell title="单位类型" :border="false" />
      <div class="inspect-record-tag--group">
        <van-row>
          <van-col :span="12" v-for="(item, key) in companyTypeData" :key="key">
            <div
              class="inspect-record-tag"
              :class="{ active: searchForm.companyType === item.code }"
              @click="handleCompanyTypeChange(item)"
            >
              {{ item.description }}
            </div>
          </van-col>
        </van-row>
      </div>
      <van-cell title="巡查时间" :border="false" />
      <div class="inspect-record-tag--group">
        <van-row>
          <van-col :span="12">
            <div
              class="inspect-record-tag inspect-record-tag__placeholder"
              align="center"
              @click="datePopupShow = true"
            >
              {{ searchForm.dateRange[0] || '开始时间' }}
            </div>
          </van-col>
          <van-col :span="12">
            <div
              class="inspect-record-tag inspect-record-tag__placeholder"
              align="center"
              @click="datePopupShow = true"
            >
              {{ searchForm.dateRange[1] || '结束时间' }}
            </div>
          </van-col>
        </van-row>
      </div>
      <van-cell title="安全隐患" :border="false" />
      <div class="inspect-record-tag--group">
        <van-row>
          <van-col :span="12" v-for="(item, key) in inspectionResultData" :key="key">
            <div
              class="inspect-record-tag"
              align="center"
              :class="{ active: searchForm.inspectionResult === item.code }"
              @click="handleResultChange(item)"
            >
              {{ item.description }}
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="inspect-record-popup--button">
        <van-row :gutter="40">
          <van-col span="12">
            <van-button block @click="onClear">清空</van-button>
          </van-col>
          <van-col span="12">
            <van-button block type="info" @click="onFilter">确定</van-button>
          </van-col>
        </van-row>
      </div>
    </van-popup>
    <van-popup v-model="datePopupShow" round position="bottom">
      <date-range-picker v-model="searchForm.dateRange" @change="handleDateRangeChange"></date-range-picker>
    </van-popup>
  </div>
</template>
<script>
import Public from '@/api/public'
import InspectVisit from '@/api/inspectVisit'
class SearchForm {
  constructor() {
    // 网格编码
    this.gridCode = ''
    this.gridName = ''
    // 单位编码
    this.companyCode = ''
    this.companyName = ''
    // 单位类型
    this.companyType = ''
    this.companyTypeName = ''
    // 开始时间
    this.startTime = ''
    // 结束时间
    this.endTime = ''
    this.dateRange = []
    // 安全隐患
    this.inspectionResult = ''
    this.inspectionResultName = ''
  }
}
export default {
  data() {
    return {
      searchLeftIcon: require('@/assets/images/basic/searchbar_search@2x.png'),
      filterPopupShow: false,
      datePopupShow: false,
      searchForm: new SearchForm(),
      searchOptionStr: '',
      gridData: [],
      pointData: [],
      companyTypeData: [],
      inspectionResultData: [],
      moreList: []
    }
  },
  created() {
    this.getGrid()
    this.getDict()
    this.getMoreList()
  },
  watch: {
    'searchForm.gridCode'() {
      this.getPoint()
    }
  },
  methods: {
    // 获取网格
    async getGrid() {
      await InspectVisit.Init.grid().then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.gridData = data
        }
      })
    },
    // 获取巡查点
    getPoint() {
      this.pointData = []
      if (!this.searchForm.gridCode) return false
      InspectVisit.Init.company({
        gridCode: this.searchForm.gridCode
      }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.pointData = data
        }
      })
    },
    // 获取单位类型、安全隐患字典项
    getDict() {
      Public.Init.init({ type: 'companyType,inspectionResultCompany' }).then(res => {
        const { data } = res.data
        this.companyTypeData = data.companyType
        this.inspectionResultData = data.inspectionResultCompany
      })
    },
    // 选择网格
    handleGridChange(item) {
      if (this.searchForm.gridCode === item.gridCode) {
        this.searchForm.gridCode = ''
        this.searchForm.gridName = ''
      } else {
        this.searchForm.gridCode = item.gridCode
        this.searchForm.gridName = item.gridName
      }
    },
    // 选择重点单位
    handleCompanyChange(item) {
      if (this.searchForm.companyCode === item.companyCode) {
        this.searchForm.companyCode = ''
        this.searchForm.companyName = ''
      } else {
        this.searchForm.companyCode = item.companyCode
        this.searchForm.companyName = item.companyName
      }
    },
    // 选择重点单位类型给
    handleCompanyTypeChange(item) {
      if (this.searchForm.companyType === item.code) {
        this.searchForm.companyType = ''
        this.searchForm.companyTypeName = ''
      } else {
        this.searchForm.companyType = item.code
        this.searchForm.companyTypeName = item.description
      }
    },
    // 选择安全隐患
    handleResultChange(item) {
      if (this.searchForm.inspectionResult === item.code) {
        this.searchForm.inspectionResult = ''
        this.searchForm.inspectionResultName = ''
      } else {
        this.searchForm.inspectionResult = item.code
        this.searchForm.inspectionResultName = item.description
      }
    },
    // 巡查记录
    getMoreList() {
      this.moreList = []
      InspectVisit.Company.record(this.searchForm).then(res => {
        if (res.data.status === 0) {
          this.moreList = res.data.data
        }
      })
    },
    // 选择时间范围
    handleDateRangeChange() {
      this.searchForm.startTime = this.searchForm.dateRange[0]
      this.searchForm.endTime = this.searchForm.dateRange[1]
      this.datePopupShow = false
    },
    // 筛选
    onFilter() {
      this.searchOptionStr = ''
      if (this.searchForm.gridName) this.searchOptionStr += this.searchForm.gridName + ' '
      if (this.searchForm.companyName) this.searchOptionStr += this.searchForm.companyName + ' '
      if (this.searchForm.companyTypeName) this.searchOptionStr += this.searchForm.companyTypeName + ' '
      if (this.searchForm.dateRange[0]) this.searchOptionStr += this.searchForm.dateRange[0] + ' - '
      if (this.searchForm.dateRange[1]) this.searchOptionStr += this.searchForm.dateRange[1] + ' '
      if (this.searchForm.inspectionResultName) this.searchOptionStr += this.searchForm.inspectionResultName
      this.filterPopupShow = false
      this.getMoreList()
    },
    // 清空
    onClear() {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否清空筛选条件',
          confirmButtonText: '是',
          cancelButtonText: '否'
        })
        .then(() => {
          this.searchForm = new SearchForm()
        })
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/record.less';
@import '~@/assets/style/inspectVisit/inspect/record.less';
@import '~@/assets/style/table.less';
</style>
